<template>
    <div>
        <el-card class="box-card">
            <!-- 搜索筛选 -->
            <el-input size="small" v-model="unlimitedName" placeholder="请输入任务名称" style="width: 200px;"></el-input>
            <el-date-picker size="small"
                            v-model="createTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
            </el-date-picker>
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
        </el-card>
        <div class="interspaceH"></div>
        <el-card class="box-card">
            <!-- 按钮 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-button size="small" icon="el-icon-plus" type="primary" @click="currentHandler('add',0)">新建无限拉群
                    </el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                      element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column align="center" type="selection" width="60">
                </el-table-column>
                <el-table-column prop="unlimitedName" label="任务名称" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="150">
                </el-table-column>
                <el-table-column prop="scanNum" label="扫码人数" width="200">
                </el-table-column>
                <el-table-column prop="PeopleNum" label="拉群进度" width="120">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="show(scope.$index, scope.row)">查看详情</el-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="downloadEWM(scope.$index, scope.row)">生成二维码</el-link>
                        <el-link type="primary" @click="deleteData(scope.$index, scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>

        <!-- 新增无限拉群 -->
        <el-dialog :visible.sync="wordsFormVisible" width="40%" @click="handleClosr">
            <el-row>
                <el-col>
                    <div style="width: 90%;">
                        <el-form ref="form" :model="wordsForm" label-width="180px" size="small"
                                 style="padding: 0px 20px;">
                            <h3>引流活码设置</h3>
                            <div
                                style="background-color: rgba(127,194,212,0.66);height: 40px;line-height: 40px;width: 80%;margin-left: 60px;padding: 10px 20px;">
                                扫描引流活码即认为客户入群，扫码人数会与实际扫描企业微信活码入群人数有偏差
                            </div>
                            <br>
                            <el-form-item label="任务名称:">
                                <el-input v-model="wordsForm.unlimitedName" style="width: 80%"></el-input>
                            </el-form-item>
                            <el-form-item label="上传LOGO：">
                                <el-switch
                                    v-model="value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                                <br>
                                <MaterialContentText :contentType="[2]" :disabledAdd="true" ref="materialContentText1"/>
                            </el-form-item>
                            <h3>加群引导设置</h3>
                            <el-form-item label="群名称：">
                                <el-input v-model="wordsForm.unlimitedGroupName" style="width: 80%"></el-input>
                            </el-form-item>

                            <el-form-item label="引导语：">
                                <el-input v-model="wordsForm.groupMessage" style="width: 80%"></el-input>
                            </el-form-item>

                            <el-form-item label="头像：">
                                <MaterialContentText :contentType="[2]" :disabledAdd="true" ref="materialContentText2"/>
                            </el-form-item>
                            <h3>企微活码设置</h3>
                            <div
                                style="background-color: rgba(127,194,212,0.66);height: 40px;line-height: 40px;width: 80%;margin-left: 60px;padding: 10px 20px;">
                                请上传在企业微信后台创建的群活码
                            </div>
                            <el-form-item label="上传企微活码：">
                                <MaterialContentText :contentType="[2]" :disabledAdd="true" ref="materialContentText3"/>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="handleClosr">取消</el-button>
                            <el-button size="mini" type="primary" @click="saveMessage">添加</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>

        <el-dialog :visible.sync="editFormVisible" width="40%" @click="handleClosr">

            <div style="width: 90%;">
                <el-form ref="form" :model="updateForm" label-width="180px" size="small" style="padding: 0px 20px;">
                    <h3>引流活码设置</h3>
                    <div
                        style="background-color: rgba(127,194,212,0.66);height: 40px;line-height: 40px;width: 80%;margin-left: 60px;padding: 10px 20px;">
                        扫描引流活码即认为客户入群，扫码人数会与实际扫描企业微信活码入群人数有偏差
                    </div>
                    <br>
                    <el-form-item label="任务名称:">
                        <el-input v-model="updateForm.unlimitedName" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="上传LOGO：">
                        <el-switch
                            v-model="value"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                        <br>
                        <el-card v-if="value == true" style="width: 80%">

                        </el-card>
                    </el-form-item>
                    <h3>加群引导设置</h3>
                    <el-form-item label="群名称：">
                        <el-input v-model="updateForm.unlimitedGroupName" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="引导语：">
                        <el-input v-model="updateForm.groupMessage" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="头像：">

                    </el-form-item>
                    <h3>企微活码设置</h3>
                    <div
                        style="background-color: rgba(127,194,212,0.66);height: 40px;line-height: 40px;width: 80%;margin-left: 60px;padding: 10px 20px;">
                        请上传在企业微信后台创建的群活码
                    </div>
                    <el-form-item label="上传企微活码：">

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="handleClosr">取消</el-button>
                    <el-button size="mini" type="primary" @click="saveMessage">添加</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 拉群进度 -->
        <el-dialog title="拉群进度" :visible.sync="formVisible" width="35%" @click="close">
            <el-form v-model="dataForm">
                <el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <div>
                                <el-row>
                                    <el-col :span="8">任务名称：</el-col>
                                    <el-col :span="16">{{dataForm.unlimitedName}}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">创建时间：</el-col>
                                    <el-col :span="16">{{dataForm.createTime}}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">扫码人数：</el-col>
                                    <el-col :span="16">{{dataForm.scanNum}}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">群活码状态：</el-col>
                                    <el-col :span="16">1</el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-row>
                                <el-col :span="8">拉群二维码：</el-col>
                                <el-col :span="16">
                                    <img :src="dataForm.dimensional">
                                    <el-button type="primary" @click="xiazai(dataForm.dimensionalPhoto)">下载二维码</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import MaterialContentText from "@/components/material_content_text/material_content_text"
    import Pagination from '@/components/Pagination'
    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;
    const initData = {
        unlimitedName: '',
        unlimitedLogo: '',
        unlimitedGroupName: '',
        groupMessage: '',
        groupPhoto: '',
        dimensional: '',
        qwDimensional: ''
    }
    export default {
        data() {
            return {
                // 编辑信息
                wordsForm: {
                    unlimitedName: '',
                    unlimitedLogo: '',
                    unlimitedGroupName: '',
                    groupMessage: '',
                    groupPhoto: '',
                    dimensional: '',
                    qwDimensional: ''
                },
                dataForm: {
                    dimensional: '',
                    dimensionalPhoto:'',
                    scanNum: 0,
                },
                // 新增
                wordsFormVisible: false,
                //编辑
                editFormVisible: false,
                updateForm: {},
                // 二维码显示
                formEWMVisible: false,
                // 详情显示
                formVisible: false,
                value: true,
                tagNameList: '',
                radio: '',
                editForm: {
                    deptId: '',
                    deptName: '',
                    deptNo: '',
                    token: localStorage.getItem('logintoken')
                },
                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                listData: [], // 用户数据
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                loading: false, // true显示加载

                options: [{
                    value: '',
                    label: ''
                }],
                // rules表单验证
                rules: {
                    deptName: [
                        {required: true, message: '请输入部门名称', trigger: 'blur'}
                    ],
                    deptNo: [{required: true, message: '请输入部门代码', trigger: 'blur'}]
                },
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                unlimitedName:'',
                createTime:[],
            }
        },

        // 注册组件
        components: {
            MaterialContentText,
            Pagination
        },

        mounted() {
            this.queryDataHandle(1, 10)
        },

        methods: {
            queryDataHandle(row, page) {
                let that = this
                let payload = {
                    pageNum: page,
                    pageSize: row
                }
                this.$request("/api/unlimit/selectAllUnlimited/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            saveMessage() {
                let that = this
                let content = this.$refs.materialContentText1.getData()
                let content2 = this.$refs.materialContentText2.getData()
                let content3 = this.$refs.materialContentText3.getData()
                debugger
                this.wordsForm.unlimitedLogo = content[0]['material']['materialLinksCover']
                this.wordsForm.groupPhoto = content2[0]['material']['materialLinksCover']
                this.wordsForm.qwDimensional = content3[0]['material']['materialLinksCover']

                this.$request("/api/unlimit/addUnlimited/1_0", this.wordsForm, "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "操作成功 ！",
                            type: 'success'
                        });
                    }
                    that.wordsForm = {...initData}
                    that.wordsFormVisible = false
                    that.queryDataHandle(1, 10)
                })
            },
            // save
            currentHandler(message, rows) {
                let that = this
                if (message == 'add') {
                    that.title = '新建无限拉群'
                    that.type = 'add'
                    that.wordsFormVisible = true;
                } else {
                    that.title = '编辑无限拉群'
                    that.type = 'edit'
                    that.updateForm = rows
                    that.editFormVisible = true;
                }
            },
            // 查询
            search() {
                let that = this
                let payload = {
                    pageNum: 1,
                    pageSize: 10,
                    unlimitedName:this.unlimitedName,
                    startTime:this.createTime[0],
                    endTime:this.createTime[1]

                }
                this.$request("/api/unlimit/selectAllUnlimited/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },

            xiazai(url) {
                this.$requestFile("/api/code/downloadFile/1_0", {accessoriesAddress:url},"无限拉群二维码.gif")
            },
            // 重置
            reset() {
                this.unlimitedName=''
                this.createTime = []
            },
            handleRemove(file) {
                console.log(file);
            },

            // 新建话术关闭
            handleClosr() {
                this.wordsFormVisible = false;
            },
            // 详情显示
            show(index, row) {
                debugger
                this.dataForm = {...row}

                this.formVisible = true;
            },
            close() {
                this.formVisible = false;
            },
            // 删除
            deleteData(index, row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this
                    this.$request("/api/unlimit/deleteUnlimited/1_0", row, "POST").then((data) => {
                        if (data.data == 1) {
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.queryDataHandle(1, 10)
                    })
                })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            downloadEWM(index, row) {
                let that = this
                this.$request("/api/unlimit/addEmpCode/1_0", row, "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "二维码生成成功 ！",
                            type: 'success'
                        });
                    }
                    that.queryDataHandle(1, 10)
                })
            },
        },

    }
</script>

<style scoped>
    img {
        width: 100px;
        height: 100px;
    }

    .dialog-footer {
        text-align: center;
    }
</style>
